<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/layui/css/layui.css">
<style type="text/css">
.layui-form .layui-form-item .layui-form-label{
   padding:8px;
}
.layui-form .layui-form-item .layui-input-inline{
  margin-left: 27px;
  width: 400px;
}
.layui-form .area .layui-input-inline{
  margin-left: 27px;
  width: 180px;
}
.layui-form .layui-form-item .layui-input-block textarea{
	margin-left: 14px;
}
.layui-form .layui-form-item .submit-btn{
  margin-left: 40%;
}
#userHeader{
  width: 780px;
  height: 400px;
  transition:all 0.3s;
  display:block;
}
.show{
  display:block;
  visibility: visible;
}
.layui-form .layui-form-item .layui-upload-button{
  margin-left: 27px;
}
</style>
</head>
<body>
<form class="layui-form" action="">
  <input type="hidden" name="userId" value="$!user.userId">
  <div class="layui-form-item">
    <label class="layui-form-label">真实名称</label>
    <div class="layui-input-inline">
      <input type="text" name="realName" value="$!user.realName" required  lay-verify="required" placeholder="请输入用户真实名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名称</label>
    <div class="layui-input-inline">
      <input type="text" name="userName" value="$!user.userName" disabled="disabled" required  lay-verify="userName" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">用户名称不可修改</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户类型</label>
    <div class="layui-input-inline">
      <select name="type" required lay-verify="required">
        <option value=""></option>
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号码</label>
    <div class="layui-input-inline">
      <input type="tel" name="phone" value="$!user.phone" required  lay-verify="phone" placeholder="请输入用户手机号码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户邮箱</label>
    <div class="layui-input-inline">
      <input type="text" name="email" value="$!user.email" required lay-verify="email" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户爱好</label>
    <div class="layui-input-inline">
      <input type="checkbox" name="userlikes" title="阅读" checked>
      <input type="checkbox" name="userlikes" title="写作">
      <input type="checkbox" name="userlikes" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="man" title="男" checked>
      <input type="radio" name="sex" value="femal" title="女" >
      <input type="radio" name="sex" value="unknow" title="未知">
    </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">用户生日</label>
      <div class="layui-input-inline">
        <input type="text" name="birthday" value="$!date.format('yyyy-MM-dd',$!user.birthday)" id="date" lay-verify="date" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
      </div>
  </div>
  <div class="layui-form-item area">
    <label class="layui-form-label">用户地区</label>
    <div class="layui-input-inline">
      <select name="province">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="city">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波">宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="area">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text site-demo-upload">
    <label class="layui-form-label">用户头像</label>
	<div class="site-demo-upbar">
	    <input type="file" name="file" class="layui-upload-file">
	</div>
  </div>
  <div class="layui-form-item layui-form-text">
	  <img id="userHeader" src="$url.zimg()/$user.avator">
  </div>
  <input type="hidden" name="avator" value="">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">个人描述</label>
    <div class="layui-input-block">
      <textarea name="remark" id="userDesc" placeholder="请输入内容" class="layui-textarea">$user.remark</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block submit-btn">
      <button class="layui-btn" lay-submit lay-filter="userForm">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/layui.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/lay/modules/element.js"></script>
<script>
$(function(){
  //头像上传
  layui.use('upload', function(){
	  layui.upload({
		    url: '$request.getContextPath()/common/upload/img',
		    type:'images',
		    method: 'post',
		    success: function(res){
		       if(res.code==200){
		    	   $("#userHeader").addClass("show");
		    	   $("#userHeader").css("display", "block");
			       $("#userHeader").attr("src","$!url.zimg()/"+res.data);
			       $("input[name='avator']").val(res.data);
		       }
		       layer.msg(res.msg,{
		    		icon: 1,
		    		skin: 'demo-class',
		    		title :'信息',
		    	    area: ['300px', '160px'],
		    	    offset: 'rb'
		    	  });
		    }
	  });
   });
  //表单验证
  layui.use(['form', 'layedit', 'laydate'], function(){
	  var form = layui.form(),layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;
	  var userDescIndex=layedit.build('userDesc',{
        tool: [
          'strong' //加粗
          ,'italic' //斜体
          ,'underline' //下划线
          ,'|' //分割线
          ,'left' //左对齐
          ,'center' //居中对齐
          ,'right' //右对齐
        ]
      });
	  //监听提交
	  form.on('submit(userForm)', function(data){
		  var remark=layedit.getContent(userDescIndex);
  		  data.field.remark=remark;
  		  data.field._method='put';
		  $.post("$request.getContextPath()/system/user/edit",data.field,function(data){
				if(data.code==200){
					//保存成功 关闭当前页
					top.layer.msg(data.msg,{
						icon: 1,
						skin: 'demo-class',
						title :'信息',
						time:500,
					    area: ['300px', '160px'],
					    offset: 'rb',
					    end :function(){
					    	var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭   
					    }
					});
				}else{
					layer.alert(data.msg);
				}
			});
	    return false;
	  });
   });
});
</script>
</html>